<template>
  <el-form v-loading="loading">
    <el-card class="box-card" shadow="never" style="margin-bottom: 16px">
      <el-row :gutter="20">
        <el-col>
          <table-page :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize" :dataList="tableData" border style="width: 100%">
            <template slot="tableColAc">
              <el-table-column align="center" label="操作" width="60">
                <template #default="{row}">
                  <el-button type="text" @click="handleView(row)">查看</el-button>
                </template>
              </el-table-column>
            </template>

            <template slot="tableCol">
              <el-table-column prop="customerName" show-overflow-tooltip min-width="160" align="center" label="客户名称">
              </el-table-column>
              <el-table-column prop="expectStartTime" show-overflow-tooltip min-width="120" align="center" label="产品类型">
                <template #default="{row}">
                  <dict-tag
                      :options="dict.type.contract_type"
                      :value="row.contractType"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="expectEndTime" show-overflow-tooltip min-width="120" align="center" label="车辆类型">
                <template v-slot="{row}">
                  <dict-tag
                      :options="dict.type.vehicle_category"
                      :value="row.vehicleCategory"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="是否免安装">
                <template v-slot="{row}">
                  <span>{{ 0 == row.isInstallation ? '否' : 1 == row.isInstallation ? '是' : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS工单类型">
                <template v-slot="{row}">
                  <dict-tag
                      :options="dict.type.gps_workorder_type"
                      :value="row.gpsWorkType"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS工单进度">
                <template v-slot="{row}">
                  <dict-tag
                      :options="dict.type.gps_work_order_progress"
                      :value="row.gpsWorkProgress"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS品牌">
                <template v-slot="{row}">
                  {{ row.gpsBrand|filterNull }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="设备到期时间">
                <template v-slot="{row}">
                  {{ row.expireTime|filterNull }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS时效">
                <template v-slot="{row}">
                  {{ row.gpsAging|filterNull }}
                </template>
              </el-table-column>


              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS品牌">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.gpsBrand) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS设备编号">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.equipmentNo) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="价格">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.gpsPrice) }}
                </template>
              </el-table-column>

              <el-table-column prop="expectEndTime" show-overflow-tooltip min-width="120" align="center" label="设备类型">
                <template v-slot="{row}">
                  <dict-tag v-if="12==row.gpsWorkType"
                            :options="dict.type.gps_device_type"
                            :value="row.equipmentType"
                  />
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="服务信息">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.serveInfo) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="安装日期">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.installTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="设备到期时间">
                <template v-slot="{row}">
                  {{ getTableVal(12, row, row.expireTime) }}
                </template>
              </el-table-column>


              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS品牌">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.gpsBrand) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS编号">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.equipmentNo) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="续费年限">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.renewYear) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="续费费用">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.renewPrice) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="续费开始时间">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.renewStartTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS到期时间">
                <template v-slot="{row}">
                  {{ getTableVal(13, row, row.renewEndTime) }}
                </template>
              </el-table-column>


              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS品牌">
                <template v-slot="{row}">
                  {{ getTableVal(14, row, row.gpsBrand) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="续费设备编号">
                <template v-slot="{row}">
                  {{ getTableVal(14, row, row.equipmentNo) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="维修时间">
                <template v-slot="{row}">
                  {{ getTableVal(14, row, row.maintenanceTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="维修费用">
                <template v-slot="{row}">
                  {{ getTableVal(14, row, row.maintenancePrice) }}
                </template>
              </el-table-column>


              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="GPS品牌">
                <template v-slot="{row}">
                  {{ getTableVal(15, row, row.gpsBrand) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="拆除设备编号">
                <template v-slot="{row}">
                  {{ getTableVal(15, row, row.equipmentNo) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="拆除时间">
                <template v-slot="{row}">
                  {{ getTableVal(15, row, row.dismantleTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="拆除费用">
                <template v-slot="{row}">
                  {{ getTableVal(15, row, row.dismantlePrice) }}
                </template>
              </el-table-column>


              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="反馈时间">
                <template v-slot="{row}">
                  {{ getTableVal(17, row, row.troubleshootFeedbackTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="120" align="center" label="反馈原因">
                <template v-slot="{row}">
                  {{ getTableVal(17, row, row.troubleshootFeedbackCause) }}
                </template>
              </el-table-column>
            </template>

          </table-page>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import {getGpsMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: 'index',
  dicts: ['contract_type', 'gps_workorder_type', 'gps_work_order_progress', 'vehicle_category', 'gps_device_type'],
  props: ['vinNo'],
  computed: {},
  watch: {},
  data() {
    return {
      tableData: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNoVinNo: this.vinNo,
        isHistoryData: 1
      },
      total: 0,
    };
  },
  created() {
    this.handleData()
  },
  mounted() {
  },
  methods: {
    getTableVal(type, row, value) {
      if (type == row.gpsWorkType) {
        return value ?? '--'
      } else {
        return '--'
      }
    },

    async handleData() {
      this.loading = true
      try {
        const res = await getGpsMessage(this.queryParams)
        const {rows, total} = res
        this.tableData = rows
        this.total = total
      } catch (e) {

      } finally {
        this.loading = false
      }

    },

    handleView(row) {
      this.$router.push({
        name: 'GPSDeviceDetail',
        query: {carId: row.carId, workType: row.gpsWorkType}
      })
    }
  },
};
</script>

<style scoped lang="scss">

</style>


